<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>简单计算器</title>

    <script src="js/vue.js"></script>
    <script src="js/baseVue.js" type="text/javascript" charset="utf-8"></script>
  </head>

  <body>
    <div id="app">
      <input type="text" v-model="number1" />
      <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="text" v-model="number2" />
      <input type="button" @click="calc" value=" = " />{{ result}}
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          number1: 0,
          number2: 0,
          result: 0,
          opt: "+"
        },
        methods: {
          calc: function() {
            var number1 = parseInt(this.number1);
            var number2 = parseInt(this.number2);
            switch (this.opt) {
              case "+":
                this.result = number1 + number2;
                break;
              case "-":
                this.result = number1 - number2;
                break;
              case "*":
                this.result = number1 * number2;
                break;
              case "/":
                this.result = number1 / number2;
                break;
            }
          }
        }
      });
    </script>
  </body>
</html>
